$(function() {
    var search = $('.search');
    var search_input = $('.search input')
        // 搜索框
    search_input.focus(function() {
            search.animate({
                "width": "224px"
            }, 500)
            search_input.blur(function() {
                search.animate({
                    "width": "194px"
                }, 500)
            })
        })
        // 导航选项卡
    $('.nav-bottom>ul>li').on('mouseover', function() {
        $(this).addClass('active').siblings().removeClass('active')
            // console.log($(this).siblings());
            // console.log(this);  
        var _index = $('.nav-bottom>ul>li').index(this);
        i = '._tab' + (_index + 1);
        $(i).addClass('show').siblings().removeClass('show');
        $('.nav-bottom>ul>li').mouseleave(function() {
            $(i).removeClass('show');
            $('.nav-bottom>ul>li').removeClass('active');
        });
        $(i).mouseover(function() {
            $(i).addClass('show');
            $(i).mouseleave(function() {
                $(i).removeClass('show');
            });
        });
        // var _index = $('._tab1').index(this);
        // $('.tabs>div').eq(_index).addClass('show').siblings().removeClass('show');
    });
    //左侧导航
    // main_left_nav_header = document.querySelector('.main_left_nav_header')
    main_left_nav_header = $('.main_left_nav_header');
    main_left = $('.main_left');
    // main_left_nav_header.offset();
    // console.log(main_left_nav_header.offset());
    // console.log($(window).scrollTop());
    $(window).scroll(function() {
        if ($(window).scrollTop() > 88) {
            main_left.addClass('guding');
        } else {
            main_left.removeClass('guding');
        }
    });
    // 图片选项卡
    // var main_right_bot_product = $('.main_right_bot_product');
    // 函数节流
    var throttle = function(fn, interval) {
        var __self = fn, // 保存需要被延迟执行的函数引用
            timer, // 定时器
            firstTime = true; // 是否是第一次调用
        return function() {
            var args = arguments,
                __me = this;
            if (firstTime) { // 如果是第一次调用，不需延迟执行
                __self.apply(__me, args);
                return firstTime = false;
            }
            if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成
                return false;
            }
            timer = setTimeout(function() { // 延迟一段时间执行
                clearTimeout(timer);
                timer = null;
                __self.apply(__me, args);
            }, interval || 1000);
        };
    };
    $('.main_right_bot_product').on('mouseover', '.zwc', throttle(function() {
        // console.log(1);
        // 事件委派
        var product_box = $('.product_box');
        var zwc = $('.zwc');
        // console.log(product_box.eq(1));
        // product_box.click(function() {
        //     location.href = "../html/goods.html";
        // });
        product_box.mouseover(function() {
            var product_box_index = product_box.index(this); //获得product_box的索引
            var product_box_i = product_box.eq(product_box_index); //
            // console.log(product_box_i.children('.product_img'));
            // console.log(product_box.eq(product_box_index)[0]);
            var product_img = $('.product_img').eq(product_box_index);
            // console.log(product_img);
            var product_img_img = $('.product_img>img').eq(product_box_index);
            var img_tab = $('.img_tab').eq(product_box_index);
            product_img.mouseover(function() {
                img_tab.css("display", "block");
                product_box_i.css({
                    "border": "1px solid #CCC",
                    "padding-top": "12px",
                    "z-index": "100"

                });
                product_box_i.mouseleave(function() {
                    img_tab.css("display", "none");
                    product_box.css({
                        "border": "none",
                        "padding-top": "13px",
                        "z-index": "10"
                            // "z-index": "888"
                    });
                })
            })
            var img_tab_img = img_tab.children('img');
            $(img_tab_img).mouseover(function() {
                var img_index = $(img_tab_img).index(this);
                let i = img_index * -220 + "px";
                product_img_img.css({
                    "left": i,
                })
            })
        })
    }, 1000));


    //footer
    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        // console.log(scrollHeight);
        // console.log(scrollTop + windowHeight);
        // console.log(scrollTop + windowHeight == scrollHeight);
        var footer = $('footer');
        if (scrollTop + windowHeight >= scrollHeight) { //判断滚动条到底部

            footer.css({
                "display": "block"
            });
            // main_left.animate({
            //     "top": -(footer.height())
            // }, 2000)
        }
        //  else {
        //     footer.css({
        //         "display": "none"
        //     });
        // }
    })

    // 引入登录界面
    // var login = $('#login');
    // login.load('../html/login.html');
    var login_box = $('.login_box');
    var reg_box = $('.reg_box');
    var _reg = $('._reg');
    _reg.click(function() {
        login_box.css("display", "none");
        reg_box.css("display", "block")
    })
    var _log = $('._log');
    _log.click(function() {
        login_box.css("display", "block");
        reg_box.css("display", "none")
    });
    //登录注册验证
    var reg = /^\w{3,16}$/
    $('#username').keyup(function() {
        if (reg.test($(this).val())) {
            $.ajax({
                type: "post",
                url: "../../lib/getUserName.php",
                data: {
                    "username": $(this).val()
                },
                dataType: "json",
                success: function(data) {
                    // var json = $.parseJSON(data);
                    // console.log(json);
                    if (data.has) {
                        $('#hasuser').html('用户名已存在').css('color', 'red');
                    } else {
                        $('#hasuser').html('用户名可以使用').css('color', 'green');
                    }
                    console.log(data);
                }
            });
        } else {
            $('#hasuser').html('用户名不合法').css("color", "black")
        }
    });

    // 请求商品信息
    $.ajax({
        type: "get",
        url: "../../lib/getall.php",
        dataType: "json",
        success: function(response) {
            var template = '';
            response.forEach((elm, i) => {
                var pic = JSON.parse(elm.pic);
                // console.log(pic);
                template += `<div class="zwc">
                <div class="product_box">
                <a href="goods.html?id=${elm.id}">
                    <div class="product_img"> 
                    
                        <img src="${pic[0].src}" alt="" style="height:220px;">
                      
                    </div>
                    <div class="product_description">
                        <div class="product_description_top">
                            <div class="img_tab">
                                <img src="${pic[1].src}" alt="">
                                <img src="${pic[2].src}" alt="">
                                <img src="${pic[3].src}" alt="">
                            </div>
                            <i>${elm.color}</i>
                            <i class="iconfont starts" style="font-size: 11px">&#xe600;&#xe600;&#xe600;&#xe600;&#xe600;(7)</i>
                        </div>
                        <div class="product_description_bot">
                            <p style="font-weight: 800;line-height: 13px;color: black">${elm.title}</p>
                            <p>${elm.name}</p>
                            <p>￥${elm.price}</p>
                        </div>
                    </div>
                    </a>
                </div>  
            </div>`;
            });
            $('.main_right_bot_product').prepend(template);


        }
    });

});